<template>
  <div class="container">
    <div class="mb20">
      <bk-tag
          v-for="(panel, index) in panels"
          :key="index"
          style="
          padding: 0 12px;
          font-size: 14px;
          height: 24px;
          line-height: 24px;
        "
          @click="handleTagClick(panel)"
      >
        {{ panel.label }}
      </bk-tag>
    </div>
    <!-- <bk-tab
      :active.sync="tabActive"
      type="unborder-card"
      @tabChange="handleTabClick"
    >
      <bk-tab-panel
        v-for="(panel, index) in panels"
        v-bind="panel"
        :key="index"
      >
        <template #label>
          <bk-tag>
            {{ panel.label }}
          </bk-tag>
        </template>
      </bk-tab-panel>
    </bk-tab> -->
    <div style="display: flex">
      <bk-input
          v-model="queryInfo.value"
          right-icon="bk-icon icon-search"
          font-size="medium"
          :clearable="true"
          style="margin-bottom: 20px"
      >
<!--        <template #prepend>
          <bk-dropdown-menu ref="dropdownRef" class="group-text">
            <template #dropdown-trigger>
              <bk-button type="primary">
                <span>{{ queryInfo.tag }}</span>
                <i class="bk-icon icon-angle-down"></i>
              </bk-button>
            </template>
            <template #dropdown-content>
              <ul class="bk-dropdown-list">
                <li v-for="(item, index) in panels" :key="index">
                  <a href="javascript:;" @click="triggerHandler(index)">
                    {{ item.label }}
                  </a>
                </li>
              </ul>
            </template>
          </bk-dropdown-menu>
        </template>-->
      </bk-input>
      <bk-button
          theme="primary"
          style="margin-left: 5px"
          @click="search"
      >
        搜索
      </bk-button>
    </div>

    <bk-container :col="2" :margin="0">

      <bk-row>
        <bk-col>
          <bk-card style="margin-bottom: 20px">
            <template #header>
              <div
                  style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span>我要提问</span>
                <i class="bk-icon icon-angle-right"></i>
              </div>
            </template>

            <bk-form
                ref="formRef"
                :model="formModel"
                :rules="formRules"
                :label-width="80"
            >
              <bk-form-item
                  label="标题"
                  :required="true"
                  property="title"
                  error-display-type="normal"
              >
                <bk-input v-model="formModel.type"></bk-input>
              </bk-form-item>
              <bk-form-item
                  label="类型"
                  :required="true"
                  property="type"
                  error-display-type="normal"
              >
                <bk-input v-model="formModel.title"></bk-input>
              </bk-form-item>
              <bk-form-item label="标签">
                <bk-select
                    v-model="formModel.tag"
                    searchable
                    multiple
                    display-tag
                    :limit="1"
                >
                  <bk-option
                      v-for="option in panels"
                      :key="option.label"
                      :id="option.label"
                      :name="option.label"
                  >
                  </bk-option>
                </bk-select>
              </bk-form-item>

              <bk-form-item label="内容">
                <bk-input
                    v-model="formModel.content"
                    type="textarea"
                    :rows="3"
                    :maxlength="255"
                    placeholder="请输入20个字符以内"
                >
                </bk-input>
              </bk-form-item>
              <bk-form-item>
                <bk-button
                    theme="primary"
                    style="margin-right: 5px"
                    @click.stop.prevent="submitData"
                >
                  提交
                </bk-button>
                <bk-button theme="default" @click="submitCancel"
                >取消
                </bk-button
                >
              </bk-form-item>
            </bk-form>
          </bk-card>
        </bk-col>
        <bk-col v-if="searchData!=''">
            <bk-card :showHead="false">
              <div>
                <h4>{{ searchData.content_title }}</h4>
                <p>点赞{{ searchData.liked_number }}
                  收藏{{ searchData.favorite_number }}</p>
              </div>
              <p>作者：{{ searchData.content_create_people }}<br/>
                时间：{{ dateFormat(searchData.content_create_time) }}<br/>
                类型：{{ searchData.content_type }}</p>
              <p>{{ searchData.content }}</p>
            </bk-card>

        </bk-col>
      </bk-row>

    </bk-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "@/router";
import {
  bkTag,
  // bkTab,
  // bkTabPanel,
  bkInput,
  bkDropdownMenu,
  bkButton,
  bkContainer,
  bkRow,
  bkCol,
  bkCard,
  bkForm,
  bkFormItem,
  bkSelect,
  bkOption,
} from "bk-magic-vue";

import CardWrap from "./components/card-wrap.vue";
import axios from "axios";

const panels = [
  {name: "all", label: "全站"},
  {name: "psychology", label: "心理"},
  {name: "e-sports", label: "电竞"},
  {name: "recommend", label: "种草"},
  {name: "high-praise", label: "高赞"},
  {name: "science", label: "科学"},
  {name: "knowledge", label: "知识"},
  {name: "brain-hole", label: "脑洞"},
  {name: "entertainment", label: "娱乐"},
  {name: "digital", label: "数码"},
  {name: "story", label: "故事"},
  {name: "game", label: "游戏"},
  {name: "workplace", label: "职场"},
  {name: "fashion", label: "时尚"},
  {name: "comic", label: "动漫"},
  {name: "finance", label: "财经"},
  {name: "foreign-language", label: "外语"},
  {name: "minority", label: "小众"},
  {name: "international", label: "国际"},
  {name: "law", label: "法律"},
  {name: "movies", label: "影视"},
];

const router = useRouter();
const handleTagClick = (panel) => {

  router.push({path: `/list/list`, query: {tag: panel.label}});
};

const queryInfo = ref({
  tag: "全站",
  value: "",
});

const dropdownRef = ref();
const triggerHandler = (index) => {
  dropdownRef.value.hide();
  queryInfo.value.tag = panels[index].label;

};
const searchData=ref("")
const search=()=>{
  let postData= {search:queryInfo.value.value}
  console.log(postData)
  axios.post("/search_contents/",postData).then(
      res=>{
        console.log(res.data)
        searchData.value=res.data.data
        console.log(searchData.value)
      }
  )
}
const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}
// form

const generateFormModel = () => {
  return {
    title: "",
    tag: [],
    content: "",
    type: ""
  };
};

const formRef = ref();
const formModel = ref(generateFormModel());
const formRules = {
  title: [
    {
      required: true,
      message: "必填项",
      trigger: "blur",
    },
  ],
};
const submitData = () => {
  let student_id = localStorage.getItem("user")

  if (student_id == null) {
    alert("请先填写信息")
    router.push({name: "Setting"})
    return
  }
  formRef.value.validate().then(
      () => {
        let postData = {
          content_create_people: localStorage.getItem("user"),
          content: formModel.value.content,
          content_title: formModel.value.title,
          content_label: formModel.value.tag[0],
          content_type: formModel.value.type
        }
        axios.post('/publish_content/', postData).then(
            (res) => {
              if (res.data.result) {
                alert("发布成功")
                formRef.value=null
              } else {
                throw "err"
              }

            }).catch(
            err => {
              console.log(err)
              alert("发布失败")
            }
        )
      },
      (validator) => {
        console.log(validator);
      }
  );
};
const submitCancel = () => {
  formRef.value.clearError();
  formModel.value = generateFormModel();
};
</script>

<style scoped lang="less">
::v-deep .bk-tab-header {
  background-image: none !important;
}

::v-deep .bk-tab-label-list-has-bar:after {
  content: normal;
}
</style>
